//js和jsx的交互接口
var cs = new CSInterface();

/*
 * #htmlId.onclick( 'eventFunction(#htmlId1, #htmlId2)' )
 */
String.prototype.onclick = function(eventFunctionStr) {
    document.getElementById(this).addEventListener("click",function(){
        eventArgumentStr = replaceParamToArgument(eventFunctionStr)
        try { console.log(eventArgumentStr) } catch (error) { $.write(error) }

        try {
            cs.evalScript(eventArgumentStr);
        } catch (error) {
            // alert(error)
        }
    })
}

'drawBackground'.onclick('drawBackground')
'putJettaFormat'.onclick('putJettaFormat')
'jettaTitle'.onclick( 'setJettaTitle')
'jettaSubtitle'.onclick( 'setJettaSubtitle')
'jettaContent'.onclick('setJettaContent')
'renameArtboard'.onclick( 'renameArtboard')
'addSwatch'.onclick( 'setJettaSwatch')
'addJettaLogo'.onclick( 'addJettaLogo')
'addJettaVerticalLogo'.onclick( 'addJettaVerticalLogo')
'addJettaHoriLogo'.onclick( 'addJettaHoriLogo')
'addVw30Logo'.onclick( 'addVw30Logo')
// 'createArtboards'.onclick( 'createArtboards(artboardSize)')
'addArtboards'.onclick( 'addArtboards')
// 'fitTargetByDialog'.onclick( 'fitTargetByDialog')
'addDocument'.onclick( 'addDocument')





// 'fitTarget'.onclick( 'fitTarget(fitWidth, fitHeight, fitSwap, fitRemove)')
// 'fitTarget'.onclick( 'fitTarget(hAlign.check, vAlign.check)')

/*
document.getElementById("fitTarget").addEventListener("click",function(){
    var getValue = function(name) {
        var doms = document.getElementsByName(name)
        var values = []
        for (var i = 0; i < doms.length; i++) {
            if (doms[i].checked) {
                values.push(doms[i].value)
            }
        }
        return values.join('|') || 'undefine'
    }

    var fitOption = getValue('fitOptions')
    var hAlign = getValue('hAlign')
    var vAlign = getValue('vAlign')
    var fnString = 'fitTarget(' + fitOption + ',' + hAlign + ',' + vAlign + ')'
    console.log(fnString)


    cs.evalScript(fnString);
}) */

/*
 *  "event('width', 'height')" => 'event(100, 200)'
 */
function replaceParamToArgument(eventStr) {
    if (eventStr.indexOf('(') < 0) {  return eventStr + '()' }

    var fnName = eventStr.substring(0, eventStr.indexOf('(') )
    var paramStr = '()'
    var params = eventStr.match( /\((.+)\)/g )
    var eventParams = eventStr.substring(eventStr.indexOf('(') + 1, eventStr.indexOf(')'))
    if (eventParams) {
        var params = eventParams.split(',')
        try {
            paramStr = genParamValueStr(params)

        } catch(err) {
            alert(err)
        }
    }
    return  fnName + paramStr
}

/*
 * ['width', 'height', 'name.check' ] => '(100, 200, 1|2|3)'
 */
function genParamValueStr(params) {
    var paramStr = '('
    if (params && params.length) {
        var paramArr = []
        for (let i = 0; i < params.length; i++) {
            var prop = params[i].replace(/(^\s*)|(\s*$)/g, '')
            var propVal = ''
            if (params[i].indexOf('.') > 0) {
                propVal = processCheckParam(params[i])
            } else {
                propVal = document.getElementById(prop) && document.getElementById(prop).value;
            }
            paramArr.push(propVal  || 'undefined')
        }
        paramStr = paramStr + paramArr.join(',')
    }
    paramStr += ')'
    return paramStr
}

function processCheckParam(param) {
    var paramArr = param.trim().split('.')
    if (paramArr.length < 2) { return  }
    var obj = document.getElementsByName(paramArr[0]);

    var check_arr = [];
    for (var i = 0; i < obj.length; i++) {
        if (obj[i].checked) {
            check_arr.push(obj[i].value);
        }

    }

    return check_arr.join('|')
}



// =========================== 事件的直接绑定 ===================================================
/*
document.getElementById("createArtboards").addEventListener("click",function(){
    var size = document.getElementById("artboardSize").value
    // var unit = document.getElementById("unit").value;
    cs.evalScript('createArtboards(' + size + ')');
})*/
